<template>
  <!-- 最外层的容器 -->
  <view class="my-checkout-container">
    <!-- 全选区域 -->
    <label class="radio">
      <radio color="#C00000" :checked="true" />
      <text>全选</text>
    </label>

    <!-- 合计区域 -->
    <view class="amount-box">
      合计:<text class="amount">￥{{ $formatP(checkedPrice) }}</text>
    </view>

    <!-- 结算按钮 -->
    <view class="btn-checkout" @click="payMoney">结算({{ checkedTotal }})</view>
  </view>
</template>

<script>
/* 
  接下来 是整个uni的核心业务  支付
  1. 有收货地址  2. 有token   3. 有勾选商品

  完成支付:
    0. 需要将token添加成请求头
    1. 创建订单       =>  请求后端接口(带订单地址 订单勾选商品)   获得订单编号
    2. 创建预支付订单  =>  请求后端接口(带订单编号)              获取支付参数
    3. 完成支付       =>  wx.requestPayment(支付参数) 
    4. 检查订单状态    =>  请求后端接口(带订单编号)              获得订单的状态(成功/异常)
   
*/
import { mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },

  computed: {
    ...mapGetters('cart', ['checkedTotal', 'checkedPrice']),
    ...mapGetters('user', ['fullAddress']),
  },

  methods: {
    async payMoney() {
      // uni中 原始方式获取数据 模板中不能使用!!!
      // console.log(this.$store.state.user.address)
      // console.log(this.$store.state.cart.cartItems.filter(item => item.goods_state))
      const temp = this.$store.state.cart.cartItems.filter(
        (item) => item.goods_state
      )

      // 最终的支付:
      // 支付流程特别烦(烦不是体现在付钱的那一刻   是付钱前的各种环境检查)
      // 1. 创建订单 => 拿到了订单编号
      const res = await this.$http.post('/my/orders/create', {
        order_price: 0.01, // 订单价格(公司中如果是开发阶段会提供这个字段 用于测试)
        consignee_addr: this.fullAddress, // 订单地址
        goods: temp.map((item) => {
          return {
            goods_id: item.goods_id,
            goods_number: item.goods_count,
            goods_price: item.goods_price,
          }
        }), // 勾选的商品列表
      })
      // console.log(res)
      if(res.meta.status !== 200) return this.$msg()

      console.log(res.message.order_number)

      // 2. 请求后端 获取支付参数 (带订单编号)
      const res2 = await this.$http.post('/my/orders/req_unifiedorder', {
        order_number: res.message.order_number
      })

      // console.log(res2)
      if(res2.meta.status !== 200) return this.$msg()
      console.log(res2.message.pay)

      // 3. 带着支付参数 发起微信支付 wx.requestPayment()
      const res3 = await uni.requestPayment(res2.message.pay)
      console.log(res3)

      // 4. 由于现在黑客很多 有一万种绕过支付??? => 公司收到钱 => 查询订单接口 检查这次支付到底成功没
      const res4 = await this.$http.post('/my/orders/chkOrder', {
        order_number: res.message.order_number
      })
      // console.log(res4)
      if(res4.meta.status !== 200) return this.$msg('请检查支付环境')

      this.$msg('订单支付成功')
    },
  },
}
</script>

<style lang="scss">
.my-checkout-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100rpx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10rpx;
  font-size: 28rpx;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-checkout {
    height: 100rpx;
    min-width: 200rpx;
    background-color: #c00000;
    color: white;
    line-height: 100rpx;
    text-align: center;
    padding: 0 20rpx;
  }
}
</style>
